<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <th:block th:include="common/head::head"></th:block>
    <style>
        #btnDiv {
            width: 240px;
            height: 200px;
            padding: 30px 10px 10px;
        }
    </style>
</head>
<body>
<form class="layui-form" action="" th:if="${dirs}">
    <div class="layui-form-item">
        <label class="layui-form-label">文件夹</label>
        <div class="layui-input-block">
            <select name="dir" lay-filter="dir" lay-verify="required" lay-search="">
                <option value="">请选择文件夹</option>
                <option th:disabled="${dir.get('error')}"
                        th:value="${dir.path}" th:each="dir : ${dirs}"
                        th:text="${dir.path}"></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block" id="tree">
        </div>
    </div>
</form>

<div class="layui-container" style="display: none;" id="btnDiv">
    <form class="layui-form">
        <div class="layui-form-item">
            <button type="button" id="download" class="layui-btn layui-btn-fluid">下载</button>
        </div>
        <div class="layui-form-item">
            <button type="button" id="tail" class="layui-btn layui-btn-fluid">文件终端</button>
        </div>
    </form>
</div>
</body>

<script type="text/javascript">
    var nowPath;
    var id = getQueryString("id");
    var tree;
    var allData;
    var clickData;
    var openLayuiIndex;

    function getData(path, children, preData) {
        loadingAjax({
            url: './list_file_data.json',
            data: {
                id: id,
                path: path,
                children: children,
                parentIndexKey: preData && preData.parentIndexKey
            },
            success: function (data) {
                if (data.code !== 200) {
                    layer.msg(data.msg);
                    return;
                }
                if (!allData) {
                    allData = data.data;
                }
                if (preData) {
                    append(preData, data.data);
                }
                tree.reload("tree", {
                    data: allData
                })
            }
        });
    }

    function append(preData, children) {
        var parentIndexKey = preData.parentIndexKey + "";
        var strings = parentIndexKey.split(",");
        var findData = allData;
        for (var i = 0; i < strings.length; i++) {
            var index = parseInt(strings[i]);
            if (i === strings.length - 1) {
                var last = findData[index];
                last.children = children;
                last.spread = true;
            } else {
                findData = findData[index].children;
            }
        }
    }

    function loadSuccess() {
        form.on('select(dir)', function (data) {
            var val = data.value;
            if (!val || val === "") {
                return;
            }
            getData(val, '');
            nowPath = val;
            allData = null;
            // 缓存选择
            layui.data('cache', {
                key: "sshFileSelect",
                value: val
            });
        });
        const cache = layui.data('cache');
        if (cache.sshFileSelect) {
            var length = $('select[name="dir"] option[value="' + cache.sshFileSelect + '"]').length;
            if (length >= 1) {
                $("select[name='dir']").val(cache.sshFileSelect);
                form.render();
                getData(cache.sshFileSelect, '');
            }
        }

        layui.use('tree', function () {
            tree = layui.tree;
            tree.render({
                elem: '#tree',
                data: [],
                id: "tree",
                click: function (obj) {
                    var data = obj.data;
                    if (!data.dir) {
                        clickData = data;
                        var btnDiv = $("#btnDiv");
                        btnDiv.show();
                        openLayuiIndex = layerOpen({
                            type: 1,
                            shade: [0.3, '#393D49'],
                            title: false,
                            content: btnDiv,
                            shadeClose: true,
                            cancel: function () {

                            },
                            end: function () {
                                btnDiv.hide();
                                clickData = null;
                            }
                        });
                        return;
                    }
                    if (data.children && data.children.length > 0) {
                        return;
                    }
                    getData(nowPath, data.parentDir, data);
                }
            });
        });

        $("#download").click(function () {
            if (!clickData) {
                return;
            }
            window.open("./download.html?id=" + id + "&path=" + nowPath + "&name=" + clickData.parentDir);
            layer.close(openLayuiIndex);
        });

        $("#tail").click(function () {
            if (!clickData) {
                return;
            }
            var tailPtah = nowPath + "/" + clickData.parentDir;
            tabChange({
                id: id + tailPtah,
                url: './node/ssh/terminal.html?id=' + id + "&tail=" + tailPtah,
                title: clickData.name + ' - 文件终端',
            });
            layer.close(openLayuiIndex);
        });
    }
</script>
</html>